<template>
  <div class="push-gcz-res-detail w-full h-full display-flex-column" style="overflow: hidden">
    <div class="top-box display-flex" style="justify-content: flex-start">
      <div class="list-item display-flex">
        <div class="item-title">项目基本信息</div>
      </div>
      <div class="list-item m-l-sm display-flex">
        <div class="item-title m-r-xs">项目Id:</div>
        <div class="item-content">{{ projectId }}</div>
      </div>
      <div class="list-item m-l-sm display-flex">
        <div class="item-title m-r-xs">3.0项目Id:</div>
        <div class="item-content">{{ itemId }}</div>
      </div>
    </div>
    <div class="w-full" style="height: 10px"></div>
    <div class="btn-box display-flex" style="justify-content: flex-start">
      <a-button type="primary" @click="getDealList()">刷新</a-button>
      <a-button type="primary" @click="handlerRePush()" class="m-l-sm">重新调用{{ dealType }}</a-button>
    </div>
    <div class="w-full" style="height: 10px"></div>
    <div class="table-box flex-1" style="overflow: hidden">
      <a-table
        class="dist-box-table"
        bordered
        :loading="table.loading"
        :rowKey="(record, index)=>index"
        :columns="table.columns"
        :data-source="table.dataSource"
        :pagination="table.pagination"
        :scroll="{ x: false, y: 'calc(100% - 70px)' }"
      >
        <template slot="resStatus" slot-scope="text,record">
          <div>{{ getResInfoByKey(record, 'code') + '' === '1' ? '成功' : '失败' }}</div>
        </template>
        <template slot="resMessage" slot-scope="text,record">
          <div
            v-if="['写入工程规划许可信息','写入用地规划许可信息'].indexOf(record.F_DEALTYPE) >= 0"
            class="can-click"
            @click="handlerShowDetail(record)">
            {{ getResInfoByKey(record, 'message') }}
          </div>
          <div v-else>{{ getResInfoByKey(record, 'message') }}</div>
        </template>
        <template slot="operate" slot-scope="text,record">
          <div class="display-flex" style="justify-content: flex-start">
            <a-button v-if="record.F_STATECODE === '0'" type="primary" @click="handlerSetDealOk(record)">标记为已解决
            </a-button>
          </div>
        </template>
      </a-table>
    </div>
    <div class="w-full" style="height: 10px"></div>
    <div class="w-full display-flex-column tip-box" style="height: 300px;overflow: auto;justify-content: flex-start">
      <div class="item-text" style="font-weight: bolder">
        运维操作提示信息
      </div>
      <div class="item-text">
        1. 点击工程证推送对应行的返回信息 可以获取 接口调用的请求参数信息
      </div>
      <div class="item-text">
        2. 上述获取到的请求参数信息是ASCII编码后的信息 可以复制后 通过如下地址去解码: https://yuucn.cn/ascii/
      </div>
      <div class="item-text">
        3. 测试环境接口调用地址为: http://223.4.69.50:18182/tzxmspall/service/projectInfoWeb
      </div>
      <div class="item-text">
        4. 生产环境接口调用地址为: http://59.202.39.226:18181/service/projectInfoWeb
      </div>
      <div class="item-text">
        5. 补推方式说明: 可以通过postman等工具 自己调用接口去进行补推 (有时候字段超长是因为换号符等问题导致的 可以用这种方式补推); 也可以使用上方按钮进行补推(此时将重新获取项目信息进行补推 如数据存在问题需要整改表单)
      </div>
      <div class="item-text">
        6. postman调用接口说明: 接口请求方式为post 参数选用body->xml 参数内容即 1 中所述内容
      </div>
      <div class="item-text">
        7. 当补推完成后 对应存在异常的 接口调用记录 需要标记为已解决 否则 该记录依旧会被查询为 存在异常情况
      </div>

    </div>
  </div>
</template>
<script>
import sqlService from '@/api/sqlService'
import invService from '@/api/invService'
import sqlExecute from '@/api/sqlExecute'

export default {
  name: 'PushGczResDetail',
  props: {},
  data () {
    return {
      projectId: 0,
      itemId: 0,
      table: {
        loading: false,
        columns: [
          {
            title: 'ID',
            dataIndex: 'F_ID'
          },
          {
            title: '调用类型',
            dataIndex: 'F_DEALTYPE'
          },
          {
            title: '调用时间',
            dataIndex: 'STARTTIME'
          },
          {
            title: '调用结果',
            dataIndex: 'resStatus',
            scopedSlots: { customRender: 'resStatus' }
          },
          {
            title: '返回信息',
            dataIndex: 'resMessage',
            scopedSlots: { customRender: 'resMessage' }
          },
          {
            title: '意见内容',
            dataIndex: 'F_REASON'
          },
          {
            title: '调用人',
            dataIndex: 'F_USERNAME'
          },
          {
            title: '操作',
            dataIndex: 'operate',
            scopedSlots: { customRender: 'operate' }
          }

        ],
        dataSource: [],
        pagination: false
      },
      dealType: '写入工程规划许可信息'
    }
  },
  mounted () {
    const query = this.$route.query
    console.log('query', query)
    this.projectId = Number(query.projectId)
    this.itemId = Number(query.itemId)
    this.dealType = query.dealType
    this.init()
  },
  methods: {
    handlerRePush () {
      this.$confirm({
        title: '提示',
        content: `确认重新推送${this.dealType}？`,
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          let res = ''
          let isNo = false
          if (this.dealType === '写入工程规划许可信息') {
            res = await invService.setJSGCGHXKXXB(this.projectId)
          } else if (this.dealType === '写入用地规划许可信息') {
            res = await invService.setJSYDGHXKXXB(this.projectId)
          } else {
            isNo = true
          }
          if (isNo) {
            this.$message.warning('不存在对应接口,请联系管理员')
            return
          }
          if (!res) {
            this.$message.success('重推成功')
            this.getDealList()
          } else {
            this.$message.error(res.message || res)
            this.getDealList()
          }
        }
      })
    },
    handlerShowDetail (record) {
      this.$dialog({
        title: '查看请求参数',
        content: () => import('./DetailDialog.vue'),
        width: 600,
        bodyStyle: { height: '500px' },
        centered: true,
        maskClosable: false,
        props: {
          detailValue: record.F_REQUESTDATA
        },
        on: {
          async ok (ctl) {
            ctl.closeDialog()
          }
        }
      })
    },
    async handlerSetDealOk (record) {
      this.$confirm({
        title: '提示',
        content: `确认标记为已解决？`,
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          const res = await sqlExecute.executeSql({
            sqlConfigName: 'updateDealStatusSuccess',
            params: {
              id: record.F_ID
            }
          })
          this.getDealList()
        }
      })
    },
    getResInfoByKey (record, key) {
      if (!record.F_RESPONSEDATA) {
        return ''
      }
      let isError = false
      try {
        const data = JSON.parse(record.F_RESPONSEDATA)
        return data[key]
      } catch (e) {
        console.error('e', e)
        isError = true
      }
      if (isError) {
        return record.F_RESPONSEDATA
      }
    },
    async getDealList () {
      this.table.loading = true
      const list = await sqlService.listQuery(
        {
          params: {},
          data: {
            sqlConfigName: 'getDealListByProjectId',
            params: {
              projectId: this.projectId
            }
          }
        })
      this.table.dataSource = list
      this.table.loading = false
    },
    init () {
      this.getDealList()
    }
  }
}
</script>

<style scoped lang="less">
.push-gcz-res-detail {
  background-color: white;
  padding: 10px;
  /deep/ .table-box{
    .can-click{
      cursor: pointer;
      color: #2BAEF2;
      text-decoration: underline;
    }
  }
  .tip-box{
    .item-text{
      line-height: 30px;
      font-size: 18px;
    }
  }
}

</style>
